<template>
  <div class="app-container customer-div">
    <!--数据列表-->
    <div class="table-container">
      <vxe-grid ref='xGrid'  v-bind="gridOptions" size="mini" :loading="listLoading"  @checkbox-change="checkboxChange">
        <template #form>
          <!--搜索-->
          <div>
            <div style="background: #f5f7fa;padding:15px 15px 0 15px;border:1px solid #EBEEF5;border-bottom:0.5px solid #EBEEF5;">
              <el-form :inline="true" :model="listQuery" size="mini" label-width="100px">
              <el-form-item>
                  <el-button
                    @click="newApprovel()"
                    type="primary">
                    新建审批
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </template>
        <template #pager>
          <div style="overflow: hidden">
            <div class="pagination-container" style="float:right;">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, sizes,prev, pager, next,jumper"
                :current-page.sync="listQuery.pageNum"
                :page-size="listQuery.pageSize"
                :page-sizes="[10,15,20,50,100,200]"
                :total="count">
              </el-pagination>
            </div>
          </div>
        </template>
        <template #num3_default="{ row, rowIndex }">
          <el-button style="margin-right:10px;" type="text" size="small"  @click="details(row)">审批内容</el-button>
          <el-button style="margin-right:20px;" type="text" size="small"  @click="approvelMan(row)">审批人</el-button>
          <el-button style="margin-right:20px;" type="text" size="small"  @click="copied(row)">抄送人</el-button>
          <el-button style="margin-right:20px;" type="text" size="small"  @click="deleted(row)">删除</el-button>
        </template>
      </vxe-grid>
    </div>
    <!-- 新增审批 -->
    <el-dialog
    :beforeClose="handleClose"
     title="新增审批"
     :visible.sync="dialogVisible"
     width="300px"
    >
    <el-input type="text" v-model="addApprovel" placeholder="请输入"></el-input>
    <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleConfirm" :loading="btnLoading">确 定</el-button>
          <el-button @click="handleClose">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 审批内容 -->
    <el-dialog
    :beforeClose="handleClose2"
     title="审批内容"
     :visible.sync="dialogVisible2"
     width="700px"
    >
    <el-input type="text" v-model="addApprovel" placeholder="请输入"></el-input>
    <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleConfirm2" :loading="btnLoading2">确 定</el-button>
          <el-button @click="handleClose2">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 审批人 -->
    <el-dialog
    :beforeClose="handleClose3"
     title="审批人"
     :visible.sync="dialogVisible3"
     width="500px"
    >
    <el-card>
    <div>
      <span class="card-header">
       <el-button class="add" type="text" size="small" icon="el-icon-plus" :disabled="!editable(1)" @click="addName(1)" v-if="listQuery3.name1==''">+</el-button>
       <span v-if="listQuery3.name1">{{ listQuery3.name1 }}</span>
    </span>
    <span class="card-header">
       <el-button class="add" type="text" size="small" icon="el-icon-plus" :disabled="!editable(2)" @click="addName(2)" v-if="listQuery3.name2==''">+</el-button>
       <span v-if="listQuery3.name2">{{ listQuery3.name2 }}</span>
    </span>
    <span class="card-header">
       <el-button class="add" type="text" size="small" icon="el-icon-plus" :disabled="!editable(3)" @click="addName(3)" v-if="listQuery3.name3==''">+</el-button>
       <span v-if="listQuery3.name3">{{ listQuery3.name3 }}</span>
    </span>
    </div>
    <el-radio-group v-model="listQuery3.radio">
  <div class="radio-group">
    <el-radio  label="1">依次审批</el-radio>
    <el-radio  label="2">同级签一个跳过</el-radio>
  </div>
</el-radio-group>

  </el-card>
    <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleConfirm3" :loading="btnLoading3">确 定</el-button>
          <el-button @click="handleClose3">取 消</el-button>
      </span>
    </el-dialog>

     <!-- 抄送人 -->
     <el-dialog
    :beforeClose="handleClose4"
     title="抄送人"
     :visible.sync="dialogVisible4"
     width="500px"
    >
    <span class="card-header">
       <el-button class="add" type="text" size="small" icon="el-icon-plus" :disabled="!editable(1)" @click="addCSName(1)" v-if="listQuery4.name==''">+</el-button>
       <span v-if="listQuery4.name">{{ listQuery4.name }}</span>
    </span>
    <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleConfirm4" :loading="btnLoading4">确 定</el-button>
          <el-button @click="handleClose4">取 消</el-button>
      </span>
    </el-dialog>

     <!-- 选择审批人 -->
     <el-dialog
    :beforeClose="handleClose5"
     title="选择审批人"
     :visible.sync="dialogVisible5"
     width="300px"
    >
    <el-radio-group v-model="listQuery3.radio">
     <div class="radio-group">
      <el-radio  label="1">指定人
        <template slot-scope="{ checked }">
         <el-select v-model="select">
           <el-option label="A" value="A"></el-option>
         </el-select>
    </template>
      </el-radio>
      <el-radio  label="2">上级领导</el-radio>
      <el-radio  label="2">部门领导</el-radio>
    </div>
</el-radio-group>
    <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleConfirm5" :loading="btnLoading5">确 定</el-button>
          <el-button @click="handleClose4">取 消</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import {formatDate} from '@/utils/date';
import store from '@/store'
import { mapGetters } from 'vuex'

const defaultListQuery={
};
const defaultListQuery3={
      name1: '',
      name2: '',
      name3: '',
      radio3: ''
};
const defaultListQuery5={
      radio5: ''
};
export default {
  name: "index",
  data(){
    return{
      roles:store.getters.roles ? store.getters.roles : [],
      listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
      listQuery3: JSON.parse(JSON.stringify(defaultListQuery3)),
      listQuery5: JSON.parse(JSON.stringify(defaultListQuery5)),
      gridOptions:{
        loading:this.listLoading,
        border: true,
        id: 'approvalAgreement',
        align:'center',
        autoResize:true,
        height:800,
        size:'mini',
        rowConfig: {
          keyField: 'ogId',
          isHover: true
        },
        columnConfig: {
          resizable: true
        },
        customConfig: {
          storage: true,
        },
        checkboxConfig:{
          reserve:true
        },
        columns: [
        {
            field: '',
            title: '审批名称',
            width: 300,
          },
          {
            field: '',
            title: '审批人数',
            width: 300,
          },
          {
            field: '',
            title: '抄送人数',
            width: 300,
          },
          {
            field: '',
            title: '操作',
            width: 350,
            slots: {
              // 使用插槽模板渲染
              default: 'num3_default',
            }
          },
        ],
        data:[{}],
      },
      addApprovel:'',
      btnLoading:false,
      btnLoading2:false,
      btnLoading3:false,
      btnLoading4:false,
      btnLoading5:false,
      dialogVisible:false,
      dialogVisible2:false,
      dialogVisible3:false,
      dialogVisible4:false,
      dialogVisible5:false,
      records:[],

    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),
  },
  created() {
    this.getList()
    // this.getListData();
    // this.getUserOptionList();


  },
  components : {
  },
  filters: {
    formatTime(time) {
      let date = new Date(time);
      return formatDate(date, 'yyyy-MM-dd')
    },
  },
  methods:{
    // 审批人依次
    editable(index) {
      if (index === 1) {
        return true;
      } else if (index === 2) {
        return this.name1.length > 0;
      } else if (index === 3) {
        return this.name1.length > 0 && this.name2.length > 0;
      }
    },
    addName(index) {
      this.dialogVisible5 = true
      if (index === 1) {
        this.name1 = '';
      } else if (index === 2) {
        this.name2 = '';
      } else if (index === 3) {
        this.name3 = '';
      }
    },

     // 新增审批
     newApprovel(){
      this.dialogVisible = true
    },
    // 关闭新增审批窗口
    handleClose(){
      this.dialogVisible=false
    },
    // 确认新增审批
    handleConfirm(){
      this.dialogVisible=false
    },
    // 审批内容
    details(){
      this.dialogVisible2 = true
    },
    // 关闭审批内容窗口
    handleClose1(){
      this.dialogVisible2 = false
    },
     // 确认审批内容
     handleConfirm(){
      this.dialogVisible2=false
    },
    handleSearchList(){
      this.listQuery.pageNum = 1;
      this.getList();
    },

    handleSizeChange(val){
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val){
      this.listQuery.pageNum = val;
      this.getList();
    },

  },
}
</script>

<style scoped lang="scss">
  td{
    border: 1px solid rgb(192, 191, 191);
  }
  .radio-group {
  display: flex;
  flex-direction: column;
}
</style>
